<template>
  <div class="dashboard-container">
    <div class="dashboard-box">
      <div class="dashboard-text">
        <h3>今日待处理：</h3>
        <div class="title">
          <h3>
            <span>{{ info.adopt_no_audit }}</span
            >个领养待审核
          </h3>
          <router-link to="/petSalvation/adopt" class="audit"
            >立即审核</router-link
          >
        </div>
        <div class="title">
          <h3>
            <span>{{ info.blacklist_no_audit }}</span
            >个⿊名单待审核
          </h3>
          <router-link to="/blacklist/index" class="audit">立即审核</router-link>
        </div>
      </div>
    </div>
    <ul class="panel-group">
      <li>
        <el-card>
          <div class="title">今⽇⽤户注册量</div>
          <h2>{{ info.new_user_today }}</h2>
          <p>⽤户注册总量 {{ info.user_count }}</p>
        </el-card>
      </li>
      <li>
        <el-card>
          <div class="title">今⽇领养发帖量</div>
          <h2>{{ info.adopt_today }}</h2>
          <p>领养发帖量总量 {{ info.adopt_count }}</p>
        </el-card>
      </li>
      <li>
        <el-card>
          <div class="title">今⽇寻宠寻主发帖量</div>
          <h2>{{ info.find_pet_master_today }}</h2>
          <p>寻宠寻主发帖总量 {{ info.find_pet_master_count }}</p>
        </el-card>
      </li>
      <li>
        <el-card>
          <div class="title">今⽇总发帖量</div>
          <h2>{{ info.ft_today }}</h2>
          <p>发帖总量 {{ info.ft_sum }}</p>
        </el-card>
      </li>
      <li>
        <el-card>
          <div class="title">今⽇⿊名单总量</div>
          <h2>{{ info.blacklist_today }}</h2>
          <p>⿊名单总量 {{ info.blacklist_count }}</p>
        </el-card>
      </li>
    </ul>

    <el-row :gutter="32">
      <el-col :span="12">
        <el-card>
          <div class="charts-title-box" slot="header">
            <span class="charts-title">发帖统计</span>
            <div>
              <el-button
                v-for="item in timeOptions"
                :key="item.key"
                :type="item.key === time_type1 ? 'primary' : ''"
                size="mini"
                @click="getPostStatistics(item)"
                >{{ item.label }}</el-button
              >
            </div>
          </div>

          <line-chart :chart-data="postStatisticsData" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="charts-title-box" slot="header">
            <span class="charts-title">领养累计统计</span>
            <div>
              <el-button
                v-for="item in timeOptions"
                :key="item.key"
                :type="item.key === time_type2 ? 'primary' : ''"
                size="mini"
                @click="getAdoptApplyStatistics(item)"
                >{{ item.label }}</el-button
              >
            </div>
          </div>

          <bar-chart :chart-data="adoptStatisticsData" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getStatistics,
  getPostStatistics,
  getAdoptApplyStatistics,
} from "@/api/tools";

import LineChart from "./component/LineChart";
import BarChart from "./component/BarChart";
import { timeOptions } from "@/const";

export default {
  name: "Dashboard",
  components: {
    LineChart,
    BarChart,
  },
  data() {
    return {
      timeOptions,
      info: {},
      time_type1: timeOptions[0].key,
      time_type2: timeOptions[0].key,

      postStatisticsData: null,
      adoptStatisticsData: null,
    };
  },
  mounted() {
    this.getStatistics();
    this.getPostStatistics(timeOptions[0]);
    this.getAdoptApplyStatistics(timeOptions[0]);
  },
  methods: {
    async getStatistics() {
      const res = await getStatistics();
      if (res.data) {
        this.info = res.data;
      }
    },
    async getPostStatistics(item) {
      this.time_type1 = item.key;
      const res = await getPostStatistics({
        time_type: this.time_type1,
      });
      if (res.data) {
        this.postStatisticsData = res.data;
      }
    },
    async getAdoptApplyStatistics(item) {
      this.time_type2 = item.key;
      const res = await getAdoptApplyStatistics({
        time_type: this.time_type2,
      });
      if (res.data) {
        this.adoptStatisticsData = res.data;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 20px;
  }
  &-box {
    height: 100px;
    display: flex;
    align-items: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  &-text {
    display: flex;
    align-items: center;
    padding-left: 20px;
    h3 {
      font-weight: normal;
      margin: 0;
    }
    .title {
      display: flex;
      align-items: center;
      margin-left: 50px;
      &:first-of-type {
        border-right: 4px solid orange;
      }
      h3 {
        font-weight: normal;
        span {
          font-size: 25px;
        }
      }
      .audit {
        margin: 0 50px;
        color: orange;
        cursor: pointer;
      }
    }
  }
}
.panel-group {
  margin-top: 15px;
  padding-left: 0;
  display: flex;
  justify-content: space-between;
  list-style: none;
  li {
    width: 19%;
    .title {
      padding-left: 10px;
      border-left: 4px solid orange;
    }
    h2 {
      text-align: center;

      font-weight: normal;
    }
  }
}
.charts-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .charts-title {
    padding-left: 10px;
    border-left: 4px solid orange;
  }
}
</style>
